<template>
 <div>
   <ClassContent class="class-info" :statusList="classStatusList"  :buttons="buttonsInfo"/>
   <ClassEdit :editDialogFormVisible="editDialogFormVisible" @closeEditFormVisible="closeEditFormVisible" :currentClassInfo="currentClassInfo"></ClassEdit>
   <ClassQuery :queryDialogFormVisible="queryDialogFormVisible" @closeQueryFormVisible="closeQueryFormVisible"></ClassQuery>
 </div>

</template>

<script setup>

import ClassContent from "@/components/common/class/ClassContent.vue";
import ClassEdit from "@/components/class/class-info/ClassEdit.vue";
import ClassQuery from "@/components/class/class-info/ClassQuery.vue";
import {ref} from "vue";
import EventBus from "@/plugins/event-bus";

const editDialogFormVisible = ref(false);
const queryDialogFormVisible = ref(false);
const currentClassInfo = ref({});
const showEditToggleDialog = (rowInfo) => {
  editDialogFormVisible.value = true;
  currentClassInfo.value = rowInfo;
};

const closeEditFormVisible = ()=>{
  editDialogFormVisible.value = false;
}

const showQueryToggleDialog = (rowInfo) => {
  EventBus.emit("query-student-list-by-class-event", {'classId': rowInfo.id, 'className': rowInfo.class_name})
  queryDialogFormVisible.value = true;

};

const closeQueryFormVisible = ()=>{
  queryDialogFormVisible.value = false;
}

const buttonsInfo = ref([
  { text: '编辑', onClick: showEditToggleDialog},
  { text: '查看', onClick: showQueryToggleDialog}
]);
const classStatusList = [1,2,3]
</script>

<style scoped lang="less">

</style>